<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Segment</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A little JavaScript class (without dependencies) to draw and animate SVG path strokes" />
    <link rel="shortcut icon" href="favicon.ico">

    <!-- CSS -->
    <link rel="stylesheet" href="css/demo.css">

    <!-- JS -->
    <script src="js/d3-ease.v1.min.js"></script>
    <script src="js/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script src="dist/segment.min.js"></script>
</head>
<body>

<div class="container">
    <div>
        <h1>Segment</h1>
        <div class="description">A JavaScript library to draw and animate SVG path strokes</div>
        <div class="description"><a href="https://github.com/lmgonzalves/segment" target="_blank">Available on GitHub</a> under <a href="https://github.com/lmgonzalves/segment/blob/gh-pages/LICENSE" target="_blank">MIT licence</a></div>
        <button id="random" class="bordered">Random</button>
        <div class="svg-container">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 474 200">
                <path d="M10 100 C 40 200, 130 200, 160 100 S 280 0, 310 100 S 430 200, 460 100" stroke="rgba(0, 0, 0, 0.2)" stroke-width="1px" fill="transparent"/>
                <path id="path" d="M10 100 C 40 200, 130 200, 160 100 S 280 0, 310 100 S 430 200, 460 100" stroke="#2980b9" stroke-width="10px" fill="transparent"/>
            </svg>
        </div>
    </div>
    <div class="demo-code">
        <div class="code-snippet">
            segment.draw(
            <div class="selectable">
                <label for="begin"></label>
                <select name="begin" id="begin">
                    <option value="0">0</option>
                    <option value="100">100</option>
                    <option value="25% + 50">25% + 50</option>
                    <option value="50% - 50">50% - 50</option>
                    <option value="50%">50%</option>
                </select>
                <span class="tooltip">Segment begin</span>
            </div>
            ,
            <div class="selectable">
                <label for="end"></label>
                <select name="end" id="end">
                    <option value="50%">50%</option>
                    <option value="400">400</option>
                    <option value="50% + 50">50% + 50</option>
                    <option value="75% - 50">75% - 50</option>
                    <option value="100%" selected="selected">100%</option>
                </select>
                <span class="tooltip">Segment end</span>
            </div>
            ,
            <div class="selectable">
                <label for="duration"></label>
                <select name="duration" id="duration">
                    <option value="0.5">0.5</option>
                    <option value="1" selected="selected">1</option>
                    <option value="1.5">1.5</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <span class="tooltip">Duration</span>
            </div>
            ,
            {easing:
            <div class="selectable">
                <label for="easing"></label>
                <select name="easing" id="easing">
                    <option value="easeLinear">linear</option>
                    <option value="easeQuadIn">quad_in</option>
                    <option value="easeQuadOut">quad_out</option>
                    <option value="easeQuadInOut">quad_in_out</option>
                    <option value="easeCubicIn">cubic_in</option>
                    <option value="easeCubicOut" selected="selected">cubic_out</option>
                    <option value="easeCubicInOut">cubic_in_out</option>
                    <option value="easeSinIn">sin_in</option>
                    <option value="easeSinOut">sin_out</option>
                    <option value="easeSinInOut">sin_in_out</option>
                    <option value="easeExpIn">exp_in</option>
                    <option value="easeExpOut">exp_out</option>
                    <option value="easeExpInOut">exp_in_out</option>
                    <option value="easeCircleIn">circle_in</option>
                    <option value="easeCircleOut">circle_out</option>
                    <option value="easeCircleInOut">circle_in_out</option>
                    <option value="easeBounceIn">bounce_in</option>
                    <option value="easeBounceOut">bounce_out</option>
                    <option value="easeBounceInOut">bounce_in_out</option>
                    <option value="easeBackIn">back_in</option>
                    <option value="easeBackOut">back_out</option>
                    <option value="easeBackInOut">back_in_out</option>
                    <option value="easeElasticIn">elastic_in</option>
                    <option value="easeElasticOut">elastic_out</option>
                    <option value="easeElasticInOut">elastic_in_out</option>
                </select>
                <span class="tooltip">Easing function</span>
            </div>
            }
            );
        </div>
    </div>
    <div>
        <button id="draw">Draw</button>
    </div>
    <div>
        <h2>Basic usage</h2>
        <h4>HTML</h4>

        <p>Add the segment script (less than 2kb), and define a <code class="inline-code">path</code> somewhere.</p>

<pre><code class="html">&lt;script src="/dist/segment.min.js"&gt;&lt;/script&gt;

&lt;svg&gt;
    &lt;path id="my-path" ...&gt;
&lt;/svg&gt;</code></pre>

        <h4>JavaScript</h4>

        <p>Initialize a new <code class="inline-code">Segment</code> with the <code class="inline-code">path</code>. Then draw a segment of stroke every time you want with: <code class="inline-code">.draw(begin, end, duration, options)</code>.</p>

<pre><code class="javascript">var myPath = document.getElementById("my-path"),
    segment = new Segment(myPath);

segment.draw("25%", "75% - 10", 1);</code></pre>

    </div>
    <div>
        <a href="https://github.com/lmgonzalves/segment" target="_blank" class="documentation-link">More documentation</a>
    </div>
    <div>
        <h2>Credits</h2>
        <p>The easing functions used in this demo belong to the excellent library <a href="https://github.com/d3/d3-ease" target="_blank">d3-ease</a>.</p>
    </div>
</div>

<footer>made with ♥ by <a href="https://lmgonzalves.com/">lmgonzalves</a></footer>

<script src="js/demo.js"></script>
</body>
</html>
